
<template>
  <!-- 收入管理 -->
  <div class="incolumn">
    <div class="incolumn_countr">
      <div class="block">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="输入搜索" class="s1">
            <el-input v-model="formInline.key" placeholder="输入合作公司" style="width:140%"></el-input>
          </el-form-item>
          <el-form-item label="输入时间" style=" margin-left: 150px;">
            <el-date-picker
              v-model="formInline.time1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chage"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
          </el-form-item>
          <el-button class="ebtn" type="warning" @click="Reconciliation">客户对账</el-button>
        </el-form>
      </div>
    </div>
    <!-- 表单 -->
    <div class="from_tab">
      <el-table :data="tableData" height="650" max-height="600">
        <el-table-column prop label="序号" align="center" type="index" width="70"></el-table-column>
        <el-table-column prop="one" label="订单号" align="center"></el-table-column>
        <el-table-column prop="tow" label="单位名称" align="center"></el-table-column>
        <el-table-column prop="three" label="下单时间" align="center" width="160"></el-table-column>
        <el-table-column prop="for" label="合同金额(元)" align="center"></el-table-column>
        <el-table-column prop="five" label="扣款金额(元)" align="center"></el-table-column>
        <el-table-column prop="six" label="付款方式" align="center"></el-table-column>
        <el-table-column prop="eigth" label="账期" align="center"></el-table-column>
        <el-table-column prop="states" label="状态" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="small"
              v-show="scope.row.states == '待开票'"
              @click="Invoice"
            >开票</el-button>
            <el-button
              type="warning"
              size="small"
              v-show="scope.row.states == '待扣款'"
              @click="Deduction"
            >扣款</el-button>
            <el-button
              type="warning"
              size="small"
              v-show="scope.row.states == '待入账'"
              @click="Accountentry"
            >入账</el-button>
            <el-button type="primary" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- ================================================================= -->
      <!--======================== 客户弹框 ================== -->
      <!-- ================================================================= -->
      <el-dialog :visible.sync="dialogTableVisible" :modal-append-to-body="false" width="1000px">
        <div class="herd_bud"></div>
        <div class="from_bt">客户对账</div>
        <br />
        <p class="Purchase_Division"></p>
        <div class="demo-form-inline">
          <el-table :data="tableDataBa" style="width: 100%" :max-height="400" height="300" stripe>
            <el-table-column label="序号" align="center" type="index" width="100"></el-table-column>
            <el-table-column prop="a" label="客户名称" align="center"></el-table-column>
            <el-table-column prop="b" label="合同总金额(元)" align="center"></el-table-column>
            <el-table-column prop="c" label="未结总金额(元)" align="center"></el-table-column>
          </el-table>
          <p class="Purchase_Division"></p>
          <div class="from_btn">
            <el-button @click="dialogTableVisible = false;" type="primary" size="small">确认</el-button>
            <el-button @click="dialogTableVisible = false" type="info" size="small">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- ======================================================= -->
      <!-- ============ 开票 ============== -->
      <!-- ======================================================= -->
      <el-dialog :visible.sync="dialogTableVisibleBa" :modal-append-to-body="false" width="1200px">
        <div class="herd_bud"></div>
        <div class="from_bt">开票信息</div>
        <br />
        <p class="Purchase_Division"></p>
        <div class="demo-form-inline">
          <el-form :inline="true" :model="formInlineBa" class="demo-form-inline" label-width="100px">
            <el-form-item label="单位名称">
              <el-input v-model="formInlineBa"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="formInlineBa"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="formInlineBa"></el-input>
            </el-form-item>
            <el-form-item label="单位地址">
              <el-input v-model="formInlineBa"></el-input>
            </el-form-item>
            <el-form-item label="纳税人识别号">
              <el-input v-model="formInlineBa"></el-input>
            </el-form-item>
            <el-form-item label="开户行">
              <el-input v-model="formInlineBa"></el-input>
            </el-form-item>
            <el-form-item label="开户行账户">
              <el-input v-model="formInlineBa"></el-input>
            </el-form-item>
            <el-form-item label="开票金额">
              <el-input v-model="formInlineBa"></el-input>
            </el-form-item>
            <el-form-item label="挂账账期">
              <el-select v-model="formInlineBa"></el-select>
            </el-form-item>
            <el-form-item label="提醒时间">
              <el-select v-model="value">
                <el-option
                  v-for="item in optionsBa"
                  :key="item.no"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="from_btn">
            <el-button @click="dialogTableVisibleBa = false" type="primary" size="small">确认</el-button>
            <el-button @click="dialogTableVisibleBa = false" type="info" size="small">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- ======================================================= -->
      <!-- ============ 扣款 ============== -->
      <!-- ======================================================= -->
      <el-dialog :visible.sync="dialogTableVisibleBt" :modal-append-to-body="false" width="1000px">
        <div class="herd_bud"></div>
        <div class="from_bt">扣款信息</div>
        <br />
        <p class="Purchase_Division"></p>
        <div class="demo-form-inline">
          <el-form :inline="true" :model="formInlineBt" class="demo-form-inline" label-width="90px">
            <el-form-item label="单号">
              <el-input v-model="formInlineBt"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="formInlineBt"></el-input>
            </el-form-item>
            <el-form-item label="单位名称">
              <el-input v-model="formInlineBt"></el-input>
            </el-form-item>
            <el-form-item label="合同金额">
              <el-input v-model="formInlineBt"></el-input>
            </el-form-item>
            <el-form-item label="扣款金额">
              <el-input v-model="formInlineBt.ab"></el-input>
            </el-form-item>
            <div class="up_phto">
              上传凭证
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </div>
          </el-form>
          <div class="from_btn">
            <el-button @click="dialogTableVisibleBt = false" type="primary" size="small">确认</el-button>
            <el-button @click="dialogTableVisibleBt = false" type="info" size="small">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- ======================================================= -->
      <!-- ============ 入账  ============== -->
      <!-- ======================================================= -->
      <el-dialog :visible.sync="dialogTableVisibleBy" :modal-append-to-body="false" width="1100px">
        <div class="herd_bud"></div>
        <div class="from_bt">入账信息</div>
        <br />
        <p class="Purchase_Division"></p>
        <div class="demo-form-inline">
          <el-form :inline="true" :model="formInlineBy" class="demo-form-inline" label-width="100px">
            <el-form-item label="订单号">
              <el-input v-model="formInlineBy"></el-input>
            </el-form-item>
            <el-form-item label="单位名称">
              <el-input v-model="formInlineBy"></el-input>
            </el-form-item>
            <el-form-item label="订单金额">
              <el-input v-model="formInlineBy"></el-input>
            </el-form-item>
            <el-form-item label="下单时间">
              <el-input v-model="formInlineBy"></el-input>
            </el-form-item>
            <el-form-item label="付款方式">
              <el-input v-model="formInlineBy"></el-input>
            </el-form-item>
            <el-form-item label="账期">
              <el-input v-model="formInlineBy"></el-input>
            </el-form-item>
            <el-form-item label="到期时间">
              <el-input v-model="formInlineBy"></el-input>
            </el-form-item>
            <div class="up_phto">
              支付凭证
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </div>
          </el-form>
          <div class="from_btn">
            <el-button @click="dialogTableVisibleBy = false" type="primary" size="small">确认</el-button>
            <el-button @click="dialogTableVisibleBy = false" type="info" size="small">取消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import daohanganniu from "../../components/daoHangAnNiu.vue";
export default {
  components: {},
  data() {
    return {
      //图片上传
      dialogImageUrl: "",
      //下拉
      value: "",
      optionsBa: [
        {
          value: "1",
          label: "3天"
        },
        {
          value: "2",
          label: "5天"
        },
        {
          value: "3",
          label: "1周"
        }
      ],
      //弹窗
      dialogTableVisible: false,
      dialogTableVisibleBa: false,
      dialogTableVisibleBt: false,
      dialogTableVisibleBy: false,
      //文本
      formInlineBa: {},
      formInlineBt: {},
      formInlineBy: {},
      formInline: {},
      //列表，表单
      tableData: [
        {
          one: "DD-895566",
          tow: "江铃汽车",
          three: "2019-8-19/ 08:36",
          for: "10000.00",
          five: "10000.00",
          six: "全款",
          eigth: "三个月",
          states: "待开票"
        },
        {
          one: "DD-895566",
          tow: "江铃汽车",
          three: "2019-8-19/ 08:36",
          for: "10000.00",
          five: "10000.00",
          six: "全款",
          eigth: "三个月",
          states: "待扣款"
        },
        {
          one: "DD-895566",
          tow: "江铃汽车",
          three: "2019-8-19/ 08:36",
          for: "10000.00",
          five: "10000.00",
          six: "全款",
          eigth: "三个月",
          states: "待入账"
        }
      ],
      tableDataBa: [
        {
          a: "江铃汽车",
          b: "30000.00",
          c: "30000.00"
        },
        {
          a: "江铃汽车",
          b: "30000.00",
          c: "30000.00"
        },
        {
          a: "江铃汽车",
          b: "30000.00",
          c: "30000.00"
        },
        {
          a: "江铃汽车",
          b: "30000.00",
          c: "30000.00"
        },
        {
          a: "江铃汽车",
          b: "30000.00",
          c: "30000.00"
        },
        {
          a: "江铃汽车",
          b: "30000.00",
          c: "30000.00"
        },
        {
          a: "江铃汽车",
          b: "30000.00",
          c: "30000.00"
        }
      ]
    };
  },
  methods: {
    //客户对账
    Reconciliation() {
      this.dialogTableVisible = true;
    },
    //开票
    Invoice() {
      this.dialogTableVisibleBa = true;
    },
    //扣款
    Deduction() {
      this.dialogTableVisibleBt = true;
    },
    //入账
    Accountentry() {
      this.dialogTableVisibleBy = true;
    },
    //上传------图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 筛选
    onsubmit() {
      this.getData(0);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.incolumn_countr {
  margin-left: 15px;
  height: 50px;
  width: 97%;
  background-color: white;
  padding-top: 10px;
}
.block {
  margin-top: -10px;
  margin-left: 20px;
  cursor: pointer;
}
.Purchase_Division {
  border: 0.5px solid $linecolor;
}
.ebtn {
  float: right;
  margin-right: 20px;
}
.herd_bud {
  margin-top: -20px;
  height: 20px;
  width: 5px;
  background-color: blue;
}
.from_bt {
  margin-top: -20px;
  margin-left: 10px;
  font-size: $font-size-medium-x;
  font-weight: bold;
}
.demo-form-inline {
  margin-top: 10px;
}
//第二块
.from_tab {
  margin-top: 20px;
  width: 98%;
  margin-left: 15px;
}

//弹框

.from_btn {
  margin-top: 20px;
  text-align: center;
}
.up_phto {
  margin-top: 10px;
  text-align: center;
}
</style>